<template>
    <div id="MyProject">
        <!--<div class="title">-->
        <!-- <van-icon name="arrow-left" />
      我的项目
      <p>
        <span class="DY">
          订阅
        </span>
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GJD/fenxiang.png" alt="" class="FX">
    </p>-->
        <!--</div>-->
        <div class="content" v-if="ISshow">
            <van-search
                style="width: 94vw; background: #eee; border-radius: 10px; height: 65px; font-size: 14px; float: left"
                v-model="values" placeholder="请输入户主姓名" @search="onSearch" />
            <ul>
                <li v-for="(item, index) in contentData" :key="index" @click="contentDataClick(item)">
                    <p style="margin-bottom: 4px; line-height: 18px">
                        <span class="hz">户主姓名：{{ item.HOUSEAPPLICANT }}</span>
                        <span style="float: right">联系电话：{{ item.APPLYPHONE }}</span>
                    </p>
                    <p style="margin-bottom: 4px">
                        <span>地址：{{
                            item.PERMANENTADDR ? item.PERMANENTADDR : "暂无数据"
                        }}</span>
                    </p>
                    <p style="margin-bottom: 4px">
                        <span style="float: left">当前进展：{{ item.WF_NAME }}</span>
                        <!--            <span>签订时间：{{item.APPLYTIME}}</span>-->
                        <span style="float: right">项目状态：{{ item.HTQDZT == 1 ? "已签订" : "未签订" }}</span>
                    </p>
                    <p></p>
                </li>
            </ul>
        </div>
        <div v-if="!ISshow" style="height: 60vh; text-align: center; padding-top: 20vh">
            <div style="margin-bottom: 10px">
                <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
        </div>
        <div class="bottom">
            <ul>
                <li v-for="(item, index) in tab" :class="{ activeClass: active == index }"
                    :style="{ color: active === index ? '#007AFF' : '#908f94' }" @click="tabClick(index)" :key="index">
                    <img v-if="active === index" :src="item.img" />
                    <img v-else :src="item.aImg" />
                    <p>{{ item.name }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {
    LoadGridData,
    dataServerOpenDataView,
    FileServerProxy,
} from "../../utils/api";
import { GJDBFunction } from '../../utils/queryData'
export default {
    data () {
        return {
            active: 0,
            ISshow: true,
            values: '',
            shenkaobeiData:[],
            urlHE:
                "https://nfzjszlb.jst.zj.gov.cn/webserver/appcs/index.html#/BizForm?bg=95c95888-1617-4310-847e-c0a94ec9a923&fd=PKID&ve=20&ft=edit&tk=" +
                window.localStorage.getItem("token"),
            tab: [
                {
                    name: "施工在建",
                    img: "./static/imgs/GJD/sgzj1.png",
                    aImg: "./static/imgs/GJD/sgzj2.png",
                },
                {
                    name: "竣工验收",
                    img: "./static/imgs/GJD/jgys1.png",
                    aImg: "./static/imgs/GJD/jgys2.png",
                },
            ],
            contentData: [

            ],
            CityColumns: [],
            XianColumns: [],
        };
    },
    watch: {
        '$store.state.position' (newVal, oldVal) {
            console.log(newVal, oldVal, 'console.log(newVal,oldVal)')
        }
    },
    methods: {
        tabClick (index) {
            this.ISshow = true;
            this.active = index;
            // this.getData();
        },
        onSearch (val) {
            if (!val) return this.contentData = this.shenkaobeiData
            this.contentData = this.shenkaobeiData.filter(item => {
                return (item.HOUSEAPPLICANT && item.HOUSEAPPLICANT.indexOf(val) > -1 )
            })
        },
        contentDataClick (item) {
            ;
            //选中行点击打开节点检查表单
            this.$router.push({
                path: "/CompletionNodeCheck",
                query: { data: JSON.stringify(item) },
            });
            // if(item.NODE_NAME == '放样申请'){
            //    this.$store.commit("getHJZT", 4);
            // } else if(item.NODE_NAME == '基槽验线'){
            //    this.$store.commit("getHJZT", 6);
            // }else if(item.NODE_NAME == '一层立模'){
            //     this.$store.commit("getHJZT", 8);
            // }else if(item.NODE_NAME == '竣工验收'){
            //     this.$store.commit("getHJZT", 7);
            // } else{
            //   this.$store.commit("getHJZT", 0);
            // }
            // if(this.$store.state.HJZT!=0){
            //    this.$router.push({
            //   path: '/CompletionAcceptance',
            //   query: { data: JSON.stringify(item) },
            //   // query: { data: item }
            // })
            // } else{

            // }
            //跳转到选择工匠页面
            // this.CityColumns.forEach(element => {
            //   if (element.CITYCODE == item.S) {
            //     item['SN'] = element.CITYNAME
            //   }
            // })
            // if ((item.NODE_NAME == '用印' && !item.HTQDZT) || (item.NODE_NAME.indexOf('签订合同') != -1 && !item.HTQDZT)) {
            //   this.$store.commit('gettoGuid', item)
            //   this.$router.push({
            //     path: '/SignContract',
            //     query: { data: item }
            //   })
            // } else {
            //   this.getXianOpenDataView(item.S, item)
            // }
        },
        getCityOpenDataView: async function () {
            this.CityColumns = [];
            let dataGuid = "e9c98787-4966-4365-80b0-c1cc678c6f85";
            // let searchObject = []
            // let token = window.localStorage.getItem('token')
            // const res = await dataServerOpenDataView(dataGuid, searchObject, token)
            let paramswg = {
                accessCode: "688bd3883572440a859dfd8ba9194e7b",
                cityCode: window.localStorage.getItem("citycodeChange")
                    ? window.localStorage.getItem("citycodeChange")
                    : "441300000000",
                params: {
                    dataguid: dataGuid,
                    searchObject: JSON.stringify([]),
                    token: window.localStorage.getItem("token"),
                },
            };
            const res = await FileServerProxy(paramswg);
            this.CityColumns = JSON.parse(res.data.data).Data;
        },
        getXianOpenDataView: async function (data, item) {
            this.XianColumns = [];
            let dataGuid = "77fdf2b0-0eb5-4243-a0a4-6185299ccd34";
            let searchObject = encodeURIComponent(
                JSON.stringify([{ field: "pid", value: data, operator: "=" }])
            );
            let token = window.localStorage.getItem("token");
            const res = await dataServerOpenDataView(dataGuid, searchObject, token);
            this.XianColumns = res.data.Data;
            this.XianColumns.forEach((element) => {
                if (element.CITYCODE == item.X) {
                    item["XN"] = element.CITYNAME;
                }
            });
            if (this.handleGoto == 0) {
                this.$router.push({
                    path: "/ProjectInformation",
                    query: { data: item },
                });
            } else {
                this.$router.push({
                    path: "/KeyLine",
                    query: { PROC_GUID: item.PROC_GUID },
                    // path: '/CompletionAcceptance',
                    // query: { data: item }
                });
            }
        },
        getData: async function () {
            this.contentData = [];
            if (this.active == 0) {
                try {
                    // let dataGuid = "b3394558-42c2-45aa-a051-c99646057156";
                    // let searchObject = []
                    // let token = window.localStorage.getItem('token')
                    // const res = await dataServerOpenDataView(dataGuid, searchObject, token)
                    // let param = {
                    //   accessCode: "688bd3883572440a859dfd8ba9194e7b",
                    //   cityCode: window.localStorage.getItem("citycode")
                    //     ? window.localStorage.getItem("citycode")
                    //     : "441300000000",
                    //   params: {
                    //     dataguid: dataGuid,
                    //     searchObject: JSON.stringify([]),
                    //     token: window.localStorage.getItem("token"),
                    //   },
                    // };
                    // const res = await FileServerProxy(param);
                    const res = await GJDBFunction('CRAFTSMAN', '2', window.localStorage.getItem('citycodeChange'))
                    this.contentData.push(...res);
                    this.shenkaobeiData = JSON.parse(JSON.stringify(this.contentData))
                } catch (err) {
                    this.contentData = []
                }
            } else {
                try {
                    // let dataGuid = "1f4925bd-3cc7-4a2d-8790-6944faae2239";
                    // let param = {
                    //   accessCode: "688bd3883572440a859dfd8ba9194e7b",
                    //   cityCode: window.localStorage.getItem("citycode")
                    //     ? window.localStorage.getItem("citycode")
                    //     : "441300000000",
                    //   params: {
                    //     dataguid: dataGuid,
                    //     searchObject: JSON.stringify([]),
                    //     token: window.localStorage.getItem("token"),
                    //   },
                    // };
                    // const res = await FileServerProxy(param);
                    const res = await GJDBFunction('CRAFTSMAN', '3', window.localStorage.getItem('citycodeChange'))
                    this.contentData = []
                } catch (err) {
                    this.contentData = []
                }
                // this.contentData = res.data.Data
            }
            if (this.contentData.length == 0) {
                this.ISshow = false;
            } else {
                this.ISshow = true;
            }
        },
    },
    updated () {
        this.$nextTick(function () {
            let position = this.$store.state.position //返回页面取出来
            const content = document.querySelector('#MyProject')
            content.scrollTop = position
        })
    },
    beforeRouteLeave (to, from, next) {
        const content = document.querySelector('#MyProject')
        let position = content.scrollTop
        this.$store.commit('SAVE_POSITION', position) //离开路由时把位置存起来
        next()
    },
    mounted () {
        this.getCityOpenDataView();
        this.getData();
    },
};
</script>
<style lang="scss">
#MyProject {
    height: 90vh;
    overflow: auto;
    background: #fff;

    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
        padding: 0 4px;

        .DY {
            font-size: 16px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            border: 1px solid #000;
            border-radius: 30px;
            margin-right: 10px;
        }

        .FX {
            height: 20px;
            width: auto;
        }
    }

    .top {
        height: 90px;
        background: #ffffff;
        margin-bottom: 20px;
        padding-top: 25px;
        text-align: center;

        .origin {
            width: 22px;
            height: 22px;
            background: #007aff;
            border-radius: 50%;
            display: inline-block;
        }

        .line {
            width: 20vw;
            /*height: 1px;*/
            border: 1px dashed #007aff;
            display: inline-block;
        }
    }

    .content {
        height: calc(100vh - 60px);
        padding: 10px;
        font-size: 14px;

        ul li {
            // height: auto;
            margin-bottom: 10px;
            padding: 4px;
            background: #fff;
            color: #848484;
            border-bottom: 1px solid #d2d2d2;

            .hz {
                color: #000;
                font-size: 16px;
            }

            p {
                clear: both;
                overflow: hidden;
            }
        }
    }

    .bottom {
        clear: both;
        position: fixed;
        bottom: 0;
        // height: 100px;
        width: 100%;
        text-align: center;
        height: 60px;
        background: #ffffff;
        border-top: 1px solid #d2d2d2;

        ul {
            width: 100%;
            height: 100%;
            clear: both;
            overflow: hidden;
            display: flex;
            height: 50px;
            align-items: center;

            li {
                float: left;
                width: 50%;
                font-size: 14px !important;

                img {
                    height: 18px;
                    margin-bottom: 0.0130px;
                }
            }
        }
    }
}
</style>
